﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
    <meta http-equiv="expires" content="0" />
    <title>FaceCat-Html5</title>
</head>
<body>
    <input type="button" value="从左至右" onclick="javascript:changeSplitLayout('lefttoright');" />
    <input type="button" value="从上至下" onclick="javascript:changeSplitLayout('toptobottom');" />
    <input type="button" value="从右至左" onclick="javascript:changeSplitLayout('righttoleft');" />
    <input type="button" value="从下至上" onclick="javascript:changeSplitLayout('bottomtotop');" />
    <input type="button" value="绝对值" onclick="javascript:changeSplitMode('absolutesize');" />
    <input type="button" value="百分比" onclick="javascript:changeSplitMode('percentsize');" /><br />
    <canvas id="splitCanvas" width="800" height="800" style="position: fixed; left: 0px; top: 0px;"/>
    <script type="text/javascript" src="facecat.js"></script>
    <script type="text/javascript">
        let canvasSplit = document.getElementById("splitCanvas"); //绘图区域
        canvasSplit.width = window.innerWidth;
        canvasSplit.height = window.innerHeight;
        let paintSplit = new FCPaint(); //绘图对象
        paintSplit.canvas = canvasSplit;
        scaleCanvas(paintSplit);
        //判断主题色
        paintSplit.defaultUIStyle = "dark";
        let url = location.href;
        if (url.indexOf("color=light") != -1) {
            paintSplit.defaultUIStyle = "light";
        }
        addDefaultEvent(canvasSplit, paintSplit);
        //判断是否移动端
        paintSplit.isMobile = isMobileMode();
        if (paintSplit.isMobile) {
            paintSplit.scaleFactorX = 2.5;
            paintSplit.scaleFactorY = 2.5;
        }

        //创建图层
        let split = new FCSplitLayoutDiv();
        let splitter = new FCView();

        //初始化图层
        let initDiv = function () {
            split.dock = "fill";
            split.size = new FCSize(400, 400);
            addView(split, paintSplit);
            if (split.paint.defaultUIStyle == "dark") {
                split.backColor = "rgb(0,0,0)";
                split.borderColor = "rgb(100,100,100)";
                split.textColor = "rgb(255,255,255)";
            } else if (split.paint.defaultUIStyle == "light") {
                split.backColor = "rgb(255,255,255)";
                split.borderColor = "rgb(150,150,150)";
                split.textColor = "rgb(0,0,0)";
            }

            if (split.paint.defaultUIStyle == "dark") {
                splitter.backColor = "rgb(150,150,150)";
            } else if (split.paint.defaultUIStyle == "light") {
                splitter.backColor = "rgb(100,100,100)";
            }
            addViewToParent(splitter, split);
            split.splitter = splitter;
            splitter.location = new FCPoint(200, 0);
            splitter.size = new FCSize(5, 100);
            splitter.paint = paintSplit;
            splitter.allowDrag = true;

            let firstView = new FCView();
            firstView.backColor = "rgb(255,0,0)";
            firstView.location = new FCPoint(0, 0);
            firstView.size = new FCSize(0, 0);
            firstView.viewName = "firstview";
            addViewToParent(firstView, split);
            split.firstView = firstView;

            let secondView = new FCView();
            secondView.backColor = "rgb(0,255,0)";
            secondView.location = new FCPoint(0, 0);
            secondView.size = new FCSize(0, 0);
            secondView.viewName = "secondview";
            addViewToParent(secondView, split);
            split.secondView = secondView;
            split.oldSize = new FCSize(400, 400);
            resetSplitLayoutDiv(split);
        };

        initDiv();

        /*
         * 重置大小
         */
        let resizeAll = function () {
            canvasSplit.width = document.documentElement.clientWidth;
            canvasSplit.height = document.documentElement.clientHeight;
            scaleCanvas(paintSplit);
            updateViewDefault(paintSplit.views);
            invalidate(paintSplit);

        };

        /*
        * 监听大小改变
        */
        window.onresize = function () {
            resizeAll();
        };

        /*
        * 旋转监听
        */
        window.onorientationchange = function () {
            resizeAll();
        };
        updateViewDefault(paintSplit.views);
        invalidate(paintSplit);

        /*
        * 切换布局
        * mode:布局方式
        */
        let changeSplitLayout = function (layout) {
            split.layoutStyle = layout;
            if (layout == "lefttoright") {
                if (split.splitMode == "percentsize") {
                    splitter.location = new FCPoint(canvasSizeSplit.cx / 2, 0);
                } else {
                    splitter.location = new FCPoint(200, 0);
                }
                splitter.size = new FCSize(5, canvasSizeSplit.cy);
            } else if (layout == "righttoleft") {
                if (split.splitMode == "percentsize") {
                    splitter.location = new FCPoint(canvasSizeSplit.cx / 2, 0);
                } else {
                    splitter.location = new FCPoint(canvasSizeSplit.cx - 200, 0);
                }
                splitter.size = new FCSize(5, canvasSizeSplit.cy);
            } else if (layout == "toptobottom") {
                if (split.splitMode == "percentsize") {
                    splitter.location = new FCPoint(0, canvasSizeSplit.cy / 2);
                } else {
                    splitter.location = new FCPoint(0, 200);
                }
                splitter.size = new FCSize(canvasSizeSplit.cx, 5);
            } else if (layout == "bottomtotop") {
                if (split.splitMode == "percentsize") {
                    splitter.location = new FCPoint(0, canvasSizeSplit.cy / 2);
                } else {
                    splitter.location = new FCPoint(0, canvasSizeSplit.cy - 200);
                }
                splitter.size = new FCSize(canvasSizeSplit.cx, 5);
            }
            resetSplitLayoutDiv(split);
            invalidate(paintSplit);
        };

        /*
        * 切换模式
        */
        let changeSplitMode = function (mode) {
            split.splitMode = mode;
            split.splitPercent = -1;
            changeSplitLayout(split.layoutStyle);
        };
    </script>
</body>
</html>
